import React from 'react'
import PropTypes from 'prop-types'
import { View, Text, StyleSheet, ImageBackground, Image } from 'react-native'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import LinearGradient from 'react-native-linear-gradient'
import CustomImage from 'src/components/image/CustomImage'
import CustomButton from 'src/components/button/CustomButton'

export default class CompanyInfo extends React.PureComponent {
  static propTypes = {
    userInfoData: PropTypes.object,
    companyClick: PropTypes.func
  }

  render () {
    const { userInfoData, companyClick } = this.props
    return (
      <View style={styles.container}>
        <CustomButton style={styles.vipBtn}>
          <CustomImage style={styles.vipBg} source={require('@/imgC/company/company_vip.png')}/>
          <View style={styles.vipTitWrap}>
            <CustomImage style={styles.vipTitImg} source={require('@/imgC/company/company_text_member.png')}/>
            <Text style={styles.vipTitTxt} >升级</Text>
          </View>
          <View style={styles.vipDescWrapWrap}>
            <View style={styles.vipDescWrap}>
              <Text style={styles.vipdesc} >招聘效果提高90%</Text>
              <CustomImage style={styles.vipTitImg} source={require('@/imgC/company/company_increase1.png')}/>
            </View>
            <View style={styles.vipDescWrap}>
              <Text style={styles.vipdesc} >升级解锁更多权限</Text>
              <CustomImage style={styles.vipTitImg} source={require('@/imgC/company/company_more.png')}/>
            </View>
          </View>
        </CustomButton>
        <CustomButton style={styles.vipBtn}>
          <CustomImage style={styles.vipBg} source={require('@/imgC/company/company_vip.png')}/>
          <View style={styles.vipTitWrap}>
            <CustomImage style={styles.vipTitImg} source={require('@/imgC/company/company_text_vip.png')}/>
            <Text style={styles.vipTitTxt} >会员</Text>
          </View>
          <View style={styles.vipDescWrapWrap}>
            <View style={styles.vipDescWrap}>
              <Text style={styles.vipdesc} >剩余115天</Text>
            </View>
            <View style={styles.vipDescWrap}>
              <Text style={styles.vipdesc} >升级解锁更多权限</Text>
              <CustomImage style={styles.vipTitImg} source={require('@/imgC/company/company_more.png')}/>
            </View>
          </View>
        </CustomButton>
        <CustomButton style={styles.companyBtn} onPress={companyClick}>
          <LinearGradient
            colors={['#65D797', '#5DC9C5']}
            style={styles.companyWrap}
          >
            <Text style={styles.companyName}>职初科技（上海）有限公司</Text>
            <View style={styles.companyDescWrap}>
              <Text style={styles.companyPercent} >0%</Text>
              <Text style={styles.companyDescText} >完善度</Text>
              <View style={styles.centerLine}/>
              <Text style={styles.companyDescText} >浏览</Text>
              <Text style={[styles.companyDescText, styles.companyViewNum]} >0</Text>
            </View>
          </LinearGradient>
        </CustomButton>
        <CustomButton style={styles.companyBtn} onPress={companyClick}>
          <LinearGradient
            colors={['#65D797', '#5DC9C5']}
            style={styles.companyWrap}
          >
            <Text style={styles.companyName}>职初科技（上海）有限公司</Text>
            <View style={styles.companyDescWrap}>
              <Text style={styles.companyPercent} >100%</Text>
              <Text style={styles.companyDescText} >完善度</Text>
              <View style={styles.centerLine}/>
              <Text style={styles.companyDescText} >浏览</Text>
              <Text style={[styles.companyDescText, styles.companyViewNum]} >1025</Text>
              <ImageBackground style={styles.companyViewNumWrap} source={require('@/imgC/company/company_text_wrap.png')}>
                <Text style={styles.companyViewIncreaseNum} >+8</Text>
                <CustomImage style={styles.companyViewIncreaseImg} source={require('@/imgC/company/company_increase2.png')}/>
              </ImageBackground>
            </View>
          </LinearGradient>
        </CustomButton>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: ScaleS(43),
    marginHorizontal: ScaleS(20)
  },
  vipBtn: {
    height: ScaleS(76),
    backgroundColor: '#FFF4F4',
    borderRadius: ScaleS(10),
    paddingLeft: ScaleS(15),
    paddingTop: ScaleS(13),
    paddingRight: ScaleS(24),
    paddingBottom: ScaleS(12),
    justifyContent: 'space-between',
    position: 'relative'
  },
  vipBg: {
    position: 'absolute',
    right: ScaleS(18),
    top: ScaleS(10)
  },
  vipTitWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(25)
  },
  vipTitTxt: {
    fontSize: ScaleT(18),
    fontWeight: '600',
    color: '#000000'
  },
  vipDescWrapWrap: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    height: ScaleS(18)
  },
  vipDescWrap: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  vipdesc: {
    marginRight: ScaleS(2),
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#BAA58E'
  },
  companyBtn: {
    marginTop: ScaleS(15),
    height: ScaleS(84)
  },
  companyWrap: {
    flex: 1,
    borderRadius: ScaleS(10),
    padding: ScaleS(15),
    paddingBottom: ScaleS(12),
    justifyContent: 'space-between'
  },
  companyName: {
    fontSize: ScaleT(15),
    fontWeight: '500',
    lineHeight: ScaleS(20),
    color: '#ffffff'
  },
  companyDescWrap: {
    marginBottom: ScaleS(-3),
    flexDirection: 'row',
    alignItems: 'center',
    height: ScaleS(27)
  },
  companyPercent: {
    marginTop: ScaleS(-3),
    fontSize: ScaleT(23),
    fontWeight: 'bold',
    color: '#FCF4C4',
    marginLeft: ScaleS(1),
    marginRight: ScaleS(5)
  },
  companyDescText: {
    fontSize: ScaleT(13),
    fontWeight: '400',
    color: '#FFFFFF'
  },
  centerLine: {
    width: ScaleS(1),
    height: ScaleS(14),
    backgroundColor: '#FFFFFF',
    marginHorizontal: ScaleS(30)
  },
  companyViewNum: {
    marginHorizontal: ScaleS(5)
  },
  companyViewNumWrap: {
    minWidth: ScaleS(22),
    height: ScaleS(15),
    paddingHorizontal: ScaleS(3),
    resizeMode: 'stretch',
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: ScaleS(3)
  },
  companyViewIncreaseNum: {
    fontSize: ScaleT(9),
    fontWeight: '600',
    color: '#FCF4C4'
  }
})
